<template>
  <div id="content">
    <div class="main">
      <!-- 品牌分类 -->
      <form class="navAttrsForm">
        <div class="attrs j_NavAttrs" style="display:block">
          <div class="brandAttr j_nav_brand">
            <div class="j_Brand attr">
              <div class="attrKey">
                品牌
              </div>
              <div class="attrValues">
                <ul class="av-collapse row-2">
                  <li><a href="#"> 皮皮说 </a></li>
                  <li><a href="#"> Java </a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </form>

      <!-- 排序规则 -->
      <div class="filter clearfix">
        <a class="fSort fSort-cur">综合<i class="f-ico-arrow-d"></i></a>
        <a class="fSort">人气<i class="f-ico-arrow-d"></i></a>
        <a class="fSort">新品<i class="f-ico-arrow-d"></i></a>
        <a class="fSort">销量<i class="f-ico-arrow-d"></i></a>
        <a class="fSort">价格<i class="f-ico-triangle-mt"></i><i class="f-ico-triangle-mb"></i></a>
      </div>

      <!-- 商品详情 -->
      <div class="view grid-nosku">

        <div class="product" v-for="(book,index) in books" :key="index">
          <div class="product-iWrap">
            <!--商品封面-->
            <div class="productImg-wrap">
              <a class="productImg">
                <img :src="book.imgUrl">
              </a>
            </div>
            <!--价格-->
            <p class="productPrice">
              <em>{{book.price}}</em>
            </p>
            <!--标题-->
            <p class="productTitle">
              <a >{{book.title}}</a>
            </p>
            <!-- 店铺名 -->
            <div class="productShop">
              <span>店铺： pipi说Java </span>
            </div>
            <!-- 成交信息 -->
            <p class="productStatus">
              <span>月成交<em>999笔</em></span>
              <span>评价 <a>3</a></span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: "MainB",
  computed:{
    ...mapGetters(['books'])
  }
}
</script>

<style scoped>

</style>
